<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function fun1() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve(100)
                }, 3000);
            })
        }
        function fun2() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve(200)
                }, 6000);
            })
        }
        function fun3() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve(300)
                }, 2000);
            })
        }

        // fun1().then((a)=>{
        //     console.log(a)
        //     return fun2()
        // }).then((b)=>{
        //     console.log(b)
        //     return fun3()
        // }).then((c)=>{
        //     console.log(c)
        // })
        //被async 标记的函数 默认值会发生改变 由undefind 变为Promise对象
        //被async 标记的函数 会为异步函数，js允许多个异步函数同时执行，而且在函数内部还可以使用 关键字await await只能在async标记过的函数中使用
        //当await 等待是一个Promise对象时，他会阻塞后面的代码，等待Promise返回成功的结果，才会继续执行后续的代码，并将结果作为await的返回值
        async function demo() {
            //这样写控制台不会报错
            //try 写入可能出错的代码
            //catch里面是捕获到的错误
            try {
                let one = await fun1();
                console.log(one);
                let two = await fun2();
                console.log(two);
                let three = await fun3();
                console.log(three)
            } catch (error) {
                console.log(error)
            }
        }
        demo()
    </script>
</body>

</html>